<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython/brython.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython/brython_stdlib.js"></script>
    <meta name="description" content="简易计算器">
    <meta name="author" content="邢栋">
    <title>简易计算器</title>
    <link rel="icon" type="image/x-ico" href="icon192.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <script>/*@cc_on window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
    <script>navigator.serviceWorker.register("sw.js")</script>
    <link rel="manifest" href="manifest.json">
</head>

<body onload="brython(1)" ontouchstart>
    <a href="https://github.com/xclala/calc">
        <img src="../github.svg">
    </a>
    <h1>简易计算器</h1>
    <p>本计算器可以在输入框输入python的内置函数和math库中的函数</p>
    <script type="text/python">
        from browser import document, html, alert
        from math import *
        calc = html.TABLE(align="center")
        calc <= html.TR(html.TH(html.TEXTAREA("", id="result", contenteditable=True, rows=5), colspan=3) +
                        html.TD("←") + html.TD("C"))
        lines = ["789/(&", "456*)|", "123->~", "0.=+<"]

        calc <= (html.TR(html.TD(x) for x in line) for line in lines)

        document <= calc

        result = document["result"] 

        def action(event):
            element = event.target
            value = element.text
            if value not in "=C←":
                if result.text in ["0", "错误"]:
                    result.text = value
                else:
                    result.text += value
            elif value == "C":
                result.text = ""
            elif value == "←":
                result.text = result.text[:-1]
            elif value == "=":
                try:
                    a = result.text
                    result.text = eval(result.text)
                    document <= html.I(a+"="+result.text+html.BR())
                except: 
                    result.text = ""
                    alert("错误")

        for button in document.select("td"):
            button.bind("click", action)
    </script>
    <a href="..">🔙<br></a>
    <a href="qrcode.png">二维码<br></a>
    <p></p>
    <style>
        * {
            font-size: 1.2em;
        }

        @media(prefers-color-scheme:dark) {
            body {
                background-color: black;
            }

            i {
                color: white;
            }

            p {
                color: black;
            }

            h1 {
                color: white;
            }

            td {
                background-color: black;
            }

            #result,
            td {
                color: white;
            }

            td:hover {
                background-color: #111114;
            }
        }

        @media(prefers-color-scheme:light) {
            body {
                background-color: whitesmoke;
            }

            i {
                color: black;
            }

            p {
                color: whitesmoke;
            }

            h1 {
                color: black;
            }

            #result,
            td {
                color: black;
            }

            td:hover {
                background-color: rgb(204, 204, 204);
            }
        }

        td {
            padding: 10px 30px 10px 30px;
            border-radius: 1em;
            text-align: center;
            cursor: default;
        }



        #result {
            border-color: #000;
            border-width: 1px;
            border-style: solid;
            padding: 10px 30px 10px 30px;
            text-align: right;
            font-size: 1em;
        }

        h1 {
            text-align: center;
        }

        a {
            text-decoration-line: none;
            font-size: small;
        }

        a:hover {
            font-size: medium;
            font-weight: bolder;
            text-decoration-line: underline;
        }

        p {
            font-size: x-small;
            text-align: center;
        }

        p:hover {
            color: red;
        }
    </style>
</body>

</html>